What is nunjucks?
Nunjucks is a powerful templating engine for JavaScript, inspired by Jinja2. It is designed to be fast, extendable, and easy to use, making it suitable for both server-side and client-side applications.
What are nunjucks's main functionalities?
Template Rendering
Nunjucks allows you to render templates with dynamic data. In this example, the template 'Hello {{ name }}!' is rendered with the context { name: 'World' }, resulting in 'Hello World!'.
const nunjucks = require('nunjucks');
nunjucks.configure({ autoescape: true });
const renderedString = nunjucks.renderString('Hello {{ name }}!', { name: 'World' });
console.log(renderedString);
Template Inheritance
Nunjucks supports template inheritance, allowing you to create a base template and extend it in other templates. This example shows a base template 'base.html' and an extending template 'index.html'. The rendered output will have the title 'Home' and the content 'Welcome to the homepage!'.
const nunjucks = require('nunjucks');
nunjucks.configure('views');
// base.html
// <html>
// <head><title>{% block title %}Default Title{% endblock %}</title></head>
// <body>{% block content %}{% endblock %}</body>
// </html>
// index.html
// {% extends 'base.html' %}
// {% block title %}Home{% endblock %}
// {% block content %}Welcome to the homepage!{% endblock %}
const renderedString = nunjucks.render('index.html');
console.log(renderedString);
Custom Filters
Nunjucks allows you to create custom filters to manipulate data within templates. In this example, a custom filter 'shorten' is created to truncate a string to a specified length. The template 'Result: {{ message | shorten(7) }}' will render as 'Result: Hello, ' when provided with the context { message: 'Hello, World!' }.
const nunjucks = require('nunjucks');
nunjucks.configure();
nunjucks.addFilter('shorten', function(str, count) {
return str.slice(0, count || 5);
});
const renderedString = nunjucks.renderString('Result: {{ message | shorten(7) }}', { message: 'Hello, World!' });
console.log(renderedString);
Other packages similar to nunjucks
handlebars
Handlebars is another popular templating engine for JavaScript. It uses a similar syntax to Nunjucks but is more focused on simplicity and logic-less templates. Handlebars is known for its ease of use and integration with various frameworks.
ejs
EJS (Embedded JavaScript) is a templating engine that allows you to generate HTML with plain JavaScript. It is less feature-rich compared to Nunjucks but is very straightforward and easy to use, making it a good choice for simple templating needs.
pug
Pug, formerly known as Jade, is a high-performance template engine heavily influenced by Haml. It uses indentation-based syntax, which can be more concise but also has a steeper learning curve compared to Nunjucks. Pug is known for its clean and readable templates.